<template>
    <div>
        <!-- 内容 -->
        <div class="content">
            <div class="titleClass" style="margin-top: 14px;">
                <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;" src="../../../assets/images/矩形装饰.png">
                项目里程碑节点
            </div>
            <div class="contentClass" style="max-height: 281px;overflow: auto;flex-direction:column;padding-left: 12px;">
                <div v-for="(el, index) in milestoneList" :key="index">
                    <div class="ItemClass">
                        <div class="firstClass specialText" style="margin-bottom: 3%;">
                            {{ dayjs(el.jhcompletedtime).format("YYYY-MM-DD") }}
                        </div>
                        <img src="" alt="">
                        <div class=" firstClass  specialText specialText2">
                            {{ el.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="titleClass" style="margin-top: 14px;">
                <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;" src="../../../assets/images/矩形装饰.png">
                项目进度情况
            </div>
            <div class="contentClass" style="flex-wrap: wrap;justify-content: flex-start;">
                <div class="flrow" style=" margin: 0px 0px 7px 10px;" v-for="(item, index) in progressList" :key="index">
                    <img style="width: 52px;height: 58px;" src="../../../assets//images/data/Group 1000004817.png">
                    <div style="margin-right: 0px;width: 65%;">
                        <div class="flrowName2">
                            <span style="margin-top: 0px;">{{ item.name }}</span>
                        </div>
                        <div class="flrowName1">
                            <img style="width: 100%;height:40px;" src="../../../assets/images/data/图层 603 拷贝 灰大素材 1.png"
                                alt="">
                            <div class="span1">
                                <span>{{ item.value
                                }}</span>
                                <span style="font-size: 12px;">{{
                                    item.unit }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { Getdurationbyp, GetRatesummarize, GetMilList } from "@/api";
import { useAppStore } from "../../../store";
import dayjs from "dayjs";
import { CreatedFormData } from "@/utils/CreatedFormData";
export default defineComponent({
    setup() {
        const { userInfo, projectInfo } = useAppStore()
        const progressList = ref([
            {
                name: '总工期',
                value: '98664',
                unit: '天'
            },
            {
                name: '已施工',
                value: '216',
                unit: '天'
            },
            {
                name: '单体数量',
                value: '16',
                unit: '个'
            },
            {
                name: '已开工单体数量',
                value: '13',
                unit: '个'
            },
            {
                name: '管网总里程',
                value: '26',
                unit: '公里'
            },
            {
                name: '已铺设里程数',
                value: '12',
                unit: '公里'
            },
            {
                name: '总体形象进度',
                value: '13',
                unit: '%'
            },
        ])
        const milestoneList = ref([])
        const windInfo = ref({
            winddirect: '--',
            windspeed: "--"
        })
        const getData = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                })
            const res = await Getdurationbyp(fd);
            if (res.data) {
                progressList.value.map((item) => {
                    switch (item.name) {
                        case '总工期':
                            item.value = res.data[0];
                            break;
                        case '已施工':
                            item.value = res.data[1];
                            break;
                        default:
                            break;
                    }
                })
            }
        }
        const getSchedule = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                })
            const res = await GetRatesummarize(fd);
            if (res.data) {
                progressList.value.map((item) => {

                    switch (item.name) {
                        case '单体数量':
                            item.value = res.data.monomernum;
                            break;
                        case '已开工单体数量':
                            item.value = res.data.startednum;
                            break;
                        case '管网总里程':
                            item.value = res.data.totalmileage;
                            break;
                        case '已铺设里程数':
                            item.value = res.data.pavedmileage;
                            break;
                        case '总体形象进度':
                            item.value = res.data.overallprogress;
                            break;
                        default:
                            break;
                    }
                })
            }
        }
        const getMilestone = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                    searchword: '',
                    pageIndex: 1,
                    pageSize: 99999,
                })
            const res = await GetMilList(fd);
            if (res.data) {
                milestoneList.value = res.data;
            }
        }
        onMounted(() => {
            getData()
            getSchedule()
            getMilestone()
        });


        return {
            progressList,
            milestoneList,
            dayjs,
            windInfo,
        };
    },
});
</script>

<style lang="less" scoped>
.flex {
    display: flex;
    align-items: center;
}

.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url('../../../assets/images/Group9436.png') no-repeat;
    background-size: 100% 100%;
}

.contentClass {
    display: flex;
    justify-content: start;
    padding: 28px 0px;
    background-color: rgba(33, 46, 90, 0.5);
}

.ItemClass {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column;
    position: relative;
    font-size: 24px;
    padding: 0px 40px;
    // color: #fff;
    height: 120px;
    background: url('../../../assets/images/data/Group 1000004956.png') no-repeat;
    background-size: contain;
}

.firstClass {
    width: 100%;
    display: flex;

}

.specialText {
    text-indent: -5em;
    padding-left: 5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 32px;

}

.specialText2 {
    text-indent: -2em;
}

.flrow {
    display: flex;
    width: 320px;
    justify-content: flex-start;
    align-items: center;

    .flrowName2 {
        display: flex;
        flex-direction: column;
        text-align: center;
        height: 46px;
        justify-content: center;
        font-size: 24px;
        background-image: url('../../../assets/images/data/Group1000004816.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .flrowName1 {
        display: flex;
        flex-direction: column;
        text-align: center;
        position: relative;
        height: 80px;

        .span1 {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            font-size: 52px;
            background-image: linear-gradient(to right, #43a5ff, #fff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 600;
        }
    }
}
</style>